<template>
    <div>
        <!-- 面包屑 -->
        <bread></bread>
        <!-- 按钮 -->
        <el-button @click="add" class="btn" type="primary" size="small">添加</el-button>
        <!-- 列表 -->
        <v-list @edit="edit"></v-list>
        <!-- 弹窗 -->
        <v-dialog @close="close" :info="info" ref="dialog"></v-dialog>
    </div>
</template>

<script lang="ts" setup>
import vList from './list.vue'
import vDialog from './dialog.vue'
import {reactive,ref} from 'vue'
// 控制子组件弹窗的显示隐藏以及标题更改
let info = reactive({
    isShow:false,
    isAdd:false
})
// 添加按钮事件
let add = ()=>{
    info.isShow=true; // 显示弹窗
    info.isAdd=true  // 控制标题为  添加菜单
}
let close = (e:boolean)=>{
    info.isShow=e; // 隐藏弹窗
}
let dialog = ref()
let edit = (id:number)=>{
    info.isShow=true; // 显示弹窗
    info.isAdd=false  // 控制标题为  修改菜单
    dialog.value.lookup(id)
}
</script>

<style scoped>
.btn{
    margin: 10px;
}
</style>
